<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>库存管理</a-breadcrumb-item>
    <a-breadcrumb-item>商品库存,配额管理</a-breadcrumb-item>
  </a-breadcrumb>

  <a-button
    type="primary"
    @click="showDrawer"
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
  >
    查询
  </a-button>

  <a-drawer
    title="查询供货商信息"
    :width="520"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form :model="query" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="商品名称">
            <a-input
              v-model:value="query.g_name"
              placeholder="请输入商品名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="商品类别">
            <a-input
              v-model:value="query.g_type"
              placeholder="请输入商品类别"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="供货商">
            <a-input
              v-model:value="query.g_supplier"
              placeholder="请输入商品供货商"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button type="primary" @click="getPage(1)">查询</a-button>
    </div>
  </a-drawer>

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
    bordered
  >
    <template #opr="{ record }">
      <a-button @click="viewDetails(record)">查看详情</a-button>
    </template>
  </a-table>
  
  
</template>
<script>
import { ref, reactive } from "vue";
import { get, put, post, tip, del } from "@/common";
export default {
  setup(props, { emit }) {
    const visible = ref(false);

    const showDrawer = () => {
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    const columns = [
      {
        dataIndex: "g_name", //服务端数据属性名
        title: "商品名称",
        align: "center",
      },
      {
        dataIndex: "g_type",
        title: "商品类别",
        align: "center",
      },

      {
        dataIndex: "g_supplier",
        title: "商品供货商",
        align: "center",
      },
      {
        dataIndex: "g_price",
        title: "价格",
        align: "center",
      },
      {
        dataIndex: "g_num",
        title: "库存量",
        align: "center",
      },
      {
        dataIndex: "opr",
        title: "详情",
        align: "center",
        slots: {
          customRender: "opr",
        },
      },
    ];
    //分页处理-start
    const query = reactive({
      g_name: "",
      g_type: "",
      g_supplier: "",
      g_branch: "",
    }); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 2, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/stock/manage", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面加载是，首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };

    //分页处理-end

    const viewDetails = (record) => {
      emit("toDetails", record);
    };
    return {
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      viewDetails,
      visible,
      onClose,
      showDrawer,
    };
  },
};
</script>
